<template>
  <div class="dashboard-container">
    <div class="flex gap-2 flex-wrap">
      <template v-for="item in timeList">
        <el-check-tag size="large" :checked="usTime===item.value" @click="checkClick(item)">
          {{$t(item.text)}}
        </el-check-tag>
      </template>
      <div>
        <el-date-picker v-model="times" unlink-panels type="datetimerange" :start-placeholder="$t('search.6')"
          :end-placeholder="$t('search.7')" value-format="YYYY-MM-DD HH:mm:ss" :default-time="[
             new Date(2024, 1, 1, 0, 0, 0),
             new Date(2024, 2, 1, 23, 59, 59),
          ]" />
      </div>
      <el-button type="primary" @click="subClick">{{$t('btn.6')}}</el-button>
    </div>
    <!-- 数据卡片 -->
    <el-row :gutter="20" class="mt-3 ">
      <el-col :xs="24" :sm="12" :lg="6" v-for="(item, index) in cardData" :key="index">
        <el-card shadow="never" class="mb-18px">
          <template #header>
            <div class="flex items-center justify-between">
              <span class="text-[var(--el-text-color-secondary)]">{{$t(item.title)}}</span>
              <el-tag :type="item.tagType" v-if="item.tagText">
                {{ $t(item.tagText)}}
              </el-tag>
            </div>
          </template>

          <div class="flex items-center justify-between mt-5">
            <div class="text-lg text-right text-[30px]" style="font-size: 26px;">
              {{ dataInfo[item.count] || '0' }}
            </div>
            <!-- <svg-icon :icon-class="item.iconClass" size="2em" /> -->
          </div>

          <div class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]">
            <span> {{ $t(item.dataDesc|| ' ') || ' ' }} </span>
            <span> {{ item.count1?dataInfo[item.count1]||0 :'--' }} </span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
// defineOptions({
//   name: "Dashboard",
//   inheritAttrs: false,
// });
// import { useUserStore } from "@/store/modules/user";
import { useTransition, TransitionPresets } from "@vueuse/core";
import moment from 'moment'
import Api from '@/api/dashboard'
import MenuApi from '@/api/system/menus'
// MenuApi.getRoutesList
import { onMounted } from "vue";
const timeList = ref([
  { text: "time.1", value: 1 },
  { text: "time.2", value: 2 },
  { text: "time.3", value: 3 },
  { text: "time.4", value: 4 },
  { text: "time.5", value: 5 },
])
const usTime = ref(1)
const times = ref([])
const checkClick = ({ value }) => {
  usTime.value = value
  let start = '', end = ''
  if (value === 1) {
    const time = new Date();
    start = moment(time).format('YYYY-MM-DD')
    end = moment(time).format('YYYY-MM-DD')
  } else if (value === 2) {
    const time = new Date();
    time.setTime(time.getTime() - 3600 * 1000 * 24);
    start = moment(time).format('YYYY-MM-DD')
    end = moment(time).format('YYYY-MM-DD')
  } else if (value === 3) {
    const starts = new Date();
    const ends = new Date();
    starts.setTime(starts.getTime() - 3600 * 1000 * 24 * 6);
    start = moment(starts).format('YYYY-MM-DD')
    end = moment(ends).format('YYYY-MM-DD')
  } else if (value === 4) {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth();
    const starts = new Date(year, month, 1);
    const ends = new Date(year, month + 1, 0);
    start = moment(starts).format('YYYY-MM-DD')
    end = moment(ends).format('YYYY-MM-DD')
  } else if (value === 5) {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth();
    const starts = new Date(year, month - 1, 1);
    const ends = new Date(year, month, 0);
    start = moment(starts).format('YYYY-MM-DD')
    end = moment(ends).format('YYYY-MM-DD')
  }
  times.value = [start + ' 00:00:00', end + ' 23:59:59']
}
const subClick = () => {
  console.log(times.value);
  let params = {
    created_at:times.value
  }
  getData(params)
}
// const userStore = useUserStore();
const date = new Date();
const cardData = ref([
  {
    title: "dashboard.1",
    count: 'users_count',
    iconClass: "visit",
  },
  {
    title: "dashboard.2",
    tagType: "success",
    tagText: "dashboard.0",
    count: 'users_count_today',
    dataDesc: "dashboard.3",
    iconClass: "project",
    count1: 'users_count_yesterday'
  },
  {
    title: "dashboard.4",
    tagType: "success",
    tagText: "dashboard.0",
    count: 'topups_count_today',
    dataDesc: "dashboard.5",
    iconClass: "ip",
    count1: 'topups_count_yesterday',
  },
  {
    title: "dashboard.6",
    tagType: "primary",
    tagText: "dashboard.0",
    count: 'topups_total_today',
    dataDesc: "dashboard.7",
    iconClass: "money",
    count1: 'topups_total_yesterday',
  },
  {
    title: "dashboard.8",
    tagType: "danger",
    tagText: "dashboard.0",
    count: 'withdrawals_count_today',
    dataDesc: "dashboard.9",
    iconClass: "money",
    count1: 'withdrawals_count_yesterday',
  },
  {
    title: "dashboard.10",
    tagType: "danger",
    tagText: "dashboard.0",
    count: 'withdrawals_total_today',
    dataDesc: "dashboard.11",
    iconClass: "order",
    count1: 'withdrawals_total_yesterday',
  },
  {
    title: "dashboard.12",
    tagType: "danger",
    tagText: "dashboard.0",
    count: 'profits_total_today',
    dataDesc: "dashboard.13",
    iconClass: "order",
    count1: 'profits_total_yesterday',
  },
]);
const dataInfo = ref({})
const getData = (params) => {
  Api.overview(params).then(({ data }) => {
    dataInfo.value = data
  })
}
const getRoute = async () => {
  const { data } = await MenuApi.getList()
  console.log(data);

}
onMounted(() => {
  getRoute()
  getData()
  checkClick({ value: 1 })
})
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 24px;

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }

  .data-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
  }

  .svg-icon {
    fill: currentcolor !important;
  }
}
</style>
